﻿@model IList<ORM.Business.Models.Entities.Question>
@{
    ViewBag.Title = "Hỏi Đáp";
}
@*<h3 class="banner-header">Hỏi & Đáp</h3>*@

<table width="100%">
    <colgroup>
        <col span="1" style="width: 80%;" />
        <col span="1" style="width: 20%;" />
    </colgroup>
    <tr>
        <td style="vertical-align: top; padding: 0px" width="80%">
            <table class="contentBox" width="100%">
                <tr>
                    <th class="boxTitle">
                        Hỏi Đáp<span id="questionDeviceNavigator"></span>
                    </th>
                </tr>
                <tr>
                    <td style="vertical-align: top;">
                        <div id="searchQuestionNavigator" style="display: none">
                            Bạn đang xem kết quả tìm kiếm cho "<span id="searchQuestionNavigatorString" style="font-style: italic"></span>"</div>
                        <div id="questionTabs" class="css-tabs" style="width: 100%; vertical-align: bottom;
                            height: 33px; display: inline-block; padding-top: 15px">
                            <ul class="menu" id="tabsfullbox" style="height: 100%; width: 100%">
                                <li id="tabs-1" style="height: 100%"><a href="#tabs-1" id="tab1" onclick="loadQuestionTab(1)">
                                    Mới</a> </li>
                                <li id="tabs-2" style="height: 100%"><a href="#tabs-2" id="tab2" onclick="loadQuestionTab(2)">
                                    Hữu Ích</a> </li>
                                <li id="tabs-3" style="height: 100%"><a href="#tabs-3" id="tab3" onclick="loadQuestionTab(3)">
                                    Đã Giải Quyết</a> </li>
                                <li id="tabs-4" style="height: 100%"><a href="#tabs-4" id="tab4" onclick="loadQuestionTab(4)">
                                    Chưa Giải Quyết</a> </li>
                                <li id="tabs-5" style="height: 100%"><a href="#tabs-5" id="tab5" onclick="loadQuestionTab(5)">
                                    Chưa Trả Lời</a> </li>
                                <span style="float: right; padding-left: 10px; padding-bottom: 5px">
                                    @using (Html.BeginForm("Create", "Question", FormMethod.Get))
                                    {
                                        <input type="submit" id="createNewQuestionBtn" class="colorButton" value="Tạo Câu Hỏi Mới"
                                            style="height: 30px" />
                                    }
                                </span>
                            </ul>
                        </div>
                        <div style="width: 100%; border-top: solid 1px #808080; padding-top: 10px">
                            <div class="tabsfullcontent" id="tabContent">
                            </div>
                        </div>
                        <br />
                    </td>
                </tr>
            </table>
        </td>
        <td style="vertical-align: top; width: 20%; padding: 0px; padding-left: 2px">
            <table class="contentBox" width="100%">
                <tr>
                    <th class="boxTitle">
                        Tìm Kiếm Câu Hỏi
                    </th>
                </tr>
                <tr>
                    <td style="background-color: #EDEDED">
                        Nhập Từ Khoá<br />
                        <form action="#" method="post">
                        <div class="field-holder" style="width: 100%">
                            <input type="text" id="txtSearchQuestion" class="field" />
                        </div>
                        <div align="center" style="padding-top: 7px">
                            <input type="button" id="btnSearchQuestion" value="Tìm Câu Hỏi" style="width: 40%;
                                height: 27px; font-size: 13px" /></div>
                        </form>
                    </td>
                </tr>
            </table>
            <br />
            <table class="contentBox" width="100%">
                <tr>
                    <th class="boxTitle">
                        Lọc Câu Hỏi
                    </th>
                </tr>
                <tr>
                    <td style="background-color: #EDEDED">
                        Loại Thiết Bị<br />
                        @Html.DropDownList("Device_Name", (IEnumerable<SelectListItem>)(ViewBag.Device_Name), new { style = "width: 100%;" })
                        <br />
                        <div style="padding-top: 7px">Hãng Sản Xuất</div>
                        @Html.DropDownList("Manufacturer_Name", (IEnumerable<SelectListItem>)(ViewBag.Manufacturer_Name), new { style = "width: 100%;" })
                        <br />
                        <div style="padding-top: 7px">Đời Máy</div>
                        @Html.DropDownList("Model_Name", (IEnumerable<SelectListItem>)(ViewBag.Model_Name), new { style = "width: 100%;", id = "Model_Name" })
                        <br />
                        <div align="center" style="padding-top: 7px">
                            <input type="button" id="btnModelSearch" value="Lọc Câu Hỏi" style="width: 40%; height: 27px; font-size: 13px" />
                        </div>
                        @Html.Hidden("Device_Id", 0)
                        @Html.Hidden("Manufacturer_Id", 0)
                        @Html.Hidden("Model_Id", 0)
                        @Html.Hidden("DeviceName", "")
                        @Html.Hidden("ManufacturerName", "")
                        @Html.Hidden("ModelName", "")
                        @Html.Hidden("StringToSearch", "")
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<script src="@Url.Content("~/Scripts/ui_core.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/ui_tabs.js")" type="text/javascript"> </script>
<script type="text/javascript">
    $('#btnSearchQuestion').click(function () {
//        $('#Device_Id').val(0);
//        $('#DeviceName').val("");
//        $('#Manufacturer_Id').val(0);
//        $('#ManufacturerName').val("");
//        $('#Model_Id').val(0);
//        $('#ModelName').val("");
//        $('#StringToSearch').val($('#txtSearchQuestion').val().trim());
//        if ($('#StringToSearch').val() != null && $('#StringToSearch').val() != "") {
//            $('#searchQuestionNavigator').css("display", "inline");
//            var searchString = $('#StringToSearch').val();
//            document.getElementById('searchQuestionNavigatorString').innerHTML = searchString;
//        }
//        $('#questionDeviceNavigator').css("display", "none");
//        loadQuestionTab(1);
        if($('#txtSearchQuestion').val().trim() != "") {
            window.location = "/Question/Index?stringToSearch=" + $('#txtSearchQuestion').val();
        }
    });
    $('#btnModelSearch').click(function () {
//          $('#StringToSearch').val("");
//        $('#Device_Id').val($('#Device_Name').val());
//        $('#DeviceName').val($('#Device_Name option:selected').text());
//        $('#Manufacturer_Id').val($('#Manufacturer_Name').val());
//        $('#ManufacturerName').val($('#Manufacturer_Name option:selected').text());
//        $('#Model_Id').val($('#Model_Name').val());
//        $('#ModelName').val($('#Model_Name option:selected').text());
//        loadQuestionTab(1);
//        var questionNavigator = "";
//        if ($('#Device_Id').val() != 0) {
//            questionNavigator += $('#DeviceName').val() + " ";
//        }
//        if ($('#Manufacturer_Id').val() != 0) {
//            questionNavigator += $('#ManufacturerName').val() + " ";
//        }
//        if ($('#Model_Id').val() != 0) {
//            questionNavigator += $('#ModelName').val();
//        }
//        if (questionNavigator != "") {
//            questionNavigator = " - " + questionNavigator;
//            $('#questionDeviceNavigator').css("display", "inline");
//            document.getElementById('questionDeviceNavigator').innerHTML = questionNavigator;
//        }

//        $('#searchQuestionNavigator').css("display", "none");
           window.location = "/Question/Index?deviceId=" + $('#Device_Name').val() + "&manufacturerId=" + $('#Manufacturer_Name').val() + "&modelId=" + $('#Model_Name').val();
        
    });
    $('#Manufacturer_Name').change(function () {
        var selectedManfacturerId = $(this).val();
        var selectedDeviceId = $('#Device_Name').val();
        $.getJSON('@Url.Action("ManufacturerNameChange")', { Manufacturer_Id: selectedManfacturerId, Device_Id: selectedDeviceId }, function (models) {
            var modelsSelect = $('#Model_Name');
            modelsSelect.empty();
            modelsSelect.append($('<option/>', {
                value: 0,
                text: ""
            }));
            $.each(models, function (index, model) {
                modelsSelect.append($('<option/>', {
                    value: model.Id,
                    text: model.Name
                }));
            });
        });
        return;
    });
    $('#Device_Name').change(function () {
        var selectedManufacturerId = $('#Manufacturer_Name').val();
        var selectedDeviceId = $(this).val();
        $.getJSON('@Url.Action("DeviceNameChange")', { Manufacturer_Id: selectedManufacturerId, Device_Id: selectedDeviceId }, function (models) {
            var modelsSelect = $('#Model_Name');
            modelsSelect.empty();
            modelsSelect.append($('<option/>', {
                value: 0,
                text: ""
            }));
            $.each(models, function (index, model) {
                modelsSelect.append($('<option/>', {
                    value: model.Id,
                    text: model.Name
                }));
            });
        });
        return;
    });
    function loadQuestionTab(index) {
        //Set lai bottomBorder cho cac tab
        var tabContentDiv = "tabContent";
        for (var i = 1; i <= 5; i++) {

            var tabId = "tab" + i;
            var myTab = document.getElementById(tabId);
            if (i != index) {
                myTab.style.borderBottom = "1px solid #808080";
            } else {
                myTab.style.borderBottom = "solid 1px white";
            }
        }
        //$(targetDiv).html("<center><img src='@Url.Content("~/Content/images/main/loading.gif")' style='margin-left: 455px;'/></center>");
        //document.getElementById(tabContentDiv).innerHTML = "<center>Đang tải dữ liệu...</center>";

        //set url and data to send
        var url;
        var condition;
        var deviceId = 0;
        var manufacturerId = 0;
        var modelId = 0;
        var stringToSearch = "";
        if ($('#Device_Id').val() != null) {
            deviceId = $('#Device_Id').val();
        }
        if ($('#Manufacturer_Id').val() != null) {
            manufacturerId = $('#Manufacturer_Id').val();
        }
        if ($('#Model_Id').val() != null) {
            modelId = $('#Model_Id').val();
        }
        if ($('#StringToSearch').val() != null) {
            stringToSearch = $('#StringToSearch').val();
        }
        if (index == 1) {
            condition = "new";
        }
        else if (index == 2) {
            condition = "helpful";
        }
        else if (index == 3) {
            condition = "resolved";
        }
        else if (index == 4) {
            condition = "unresolved";
        }
        else if (index == 5) {
            condition = "unanswered";
        }
        url = "/Question/GetQuestionList?condition=" + condition + "&deviceId=" + deviceId + "&manufacturerId=" + manufacturerId + "&modelId=" + modelId + "&stringToSearch=" + stringToSearch;
        $.get(url, function (result) {
            document.getElementById(tabContentDiv).innerHTML = result;
        });
        if (condition == "new" && deviceId == 0 && manufacturerId == 0 && modelId == 0 && stringToSearch == "") {
            window.location.hash = "";
            return;
        }
        //window.location.hash = condition + "-" + deviceId + "-" + manufacturerId + "-" + modelId + "-" + stringToSearch;
    }

    $(document).ready(function () {
        $('#questionDeviceNavigator').css("display", "none");
        $('#searchQuestionNavigator').css("display", "none");
        var deviceSelect = $('#Device_Name');
        deviceSelect.prepend($('<option/>', {
            value: 0,
            text: ""
        }));
        deviceSelect.val(0);
        var manufacturerSelect = $('#Manufacturer_Name');
        manufacturerSelect.prepend($('<option/>', {
            value: 0,
            text: ""
        }));
        manufacturerSelect.val(0);
        var modelSelect = $('#Model_Name');
        modelSelect.prepend($('<option/>', {
            value: 0,
            text: ""
        }));
        modelSelect.val(0);
        $('#tabsfullbox').tabs();
//        var myArray = new Array();
//        myArray = window.location.hash.substring(1).split('-');
//        $('#Device_Id').val(myArray[1]);
//        $('#Manufacturer_Id').val(myArray[2]);
//        $('#Model_Id').val(myArray[3]);
//        $('#StringToSearch').val(myArray[4]);
//        $("#tabsfullbox").tabs();
          document.getElementById('StringToSearch').innerHTML = "@ViewBag.StringToSearch";
//        $('#StringToSearch').val("@ViewBag.StringToSearch");
//        $('#txtSearchGuide').val('@ViewBag.StringToSearch');
        if(@ViewBag.DeviceId != 0) {
            $('#Device_Id').val(@ViewBag.DeviceId);
            $('#DeviceName').val('@ViewBag.DeviceName');
        }
        if(@ViewBag.ManufacturerId != 0) {
            $('#Manufacturer_Id').val(@ViewBag.ManufacturerId);
            $('#ManufacturerName').val('@ViewBag.ManufacturerName');
        }
        if(@ViewBag.ModelId != 0) {
            $('#Model_Id').val(@ViewBag.ModelId);
            $('#ModelName').val('@ViewBag.ModelName');
        }
//        if (myArray[0] == "" || myArray[0] == "new") {
//            loadQuestionTab(1);
//        }
//        else if (myArray[0] == "helpful") {
//            loadQuestionTab(2);
//        }
//        else if (myArray[0] == "resolved") {
//            loadQuestionTab(3);
//        }
//        else if (myArray[0] == "unresolved") {
//            loadQuestionTab(4);
//        }
//        else if (myArray[0] == "unanswered") {
//            loadQuestionTab(5);
//        }
        loadQuestionTab(1);
        if ($('#StringToSearch').val() != null && $('#StringToSearch').val() != "") {
            $('#questionDeviceNavigator').css("display", "none");
            $('#searchQuestionNavigator').css("display", "inline");
            document.getElementById('tab1').innerHTML = "Tất Cả";
            $('#tab2').css("display", "none");
            var searchString = $('#StringToSearch').val();
            document.getElementById('searchQuestionNavigatorString').innerHTML = searchString;
        }
        else {
            var questionNavigator = "";
            if ($('#Device_Id').val() != 0) {
                questionNavigator += $('#DeviceName').val() + " ";
            }
            if ($('#Manufacturer_Id').val() != 0) {
                questionNavigator += $('#ManufacturerName').val() + " ";
            }
            if ($('#Model_Id').val() != 0) {
                questionNavigator += $('#ModelName').val();
            }
            if (questionNavigator != "") {
                questionNavigator = " - " + questionNavigator;
                $('#questionDeviceNavigator').css("display", "inline");
                document.getElementById('questionDeviceNavigator').innerHTML = questionNavigator;
            }
            $('#searchQuestionNavigator').css("display", "none");

        }
        deviceSelect.val( $('#Device_Id').val());
        manufacturerSelect.val( $('#Manufacturer_Id').val());
        if($('#Model_Id').val() != 0) {
            $('#Model_Name').val($('#Model_Id').val());
        }
    });
</script>
